<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { requireImg } from '@/utils/common'
import AirAnimation from '@/views/operation/js/airAnimation.js'
const airAnimation = new AirAnimation()
const navList = ref([
  {
    name: '低空总览',
    img: requireImg('common/menu01.png'),
    imgAct: requireImg('common/menu01_active.png'),
    routerName: 'OverView'
  },
  {
    name: '空域管理',
    img: requireImg('common/menu02.png'),
    imgAct: requireImg('common/menu02_active.png'),
    routerName: 'Management'
  },
  {
    name: '航路航线',
    img: requireImg('common/menu05.png'),
    imgAct: requireImg('common/menu05_active.png'),
    routerName: 'Hangxian'
  },
  {
    name: '基础设施',
    img: requireImg('common/menu03.png'),
    imgAct: requireImg('common/menu03_active.png'),
    routerName: 'Infrastructure'
  },
  {
    name: '运营管理',
    img: requireImg('common/menu04.png'),
    imgAct: requireImg('common/menu04_active.png'),
    routerName: 'Operation'
  }
  // {
  //   name: '低空产业',
  //   img: requireImg('common/menu06.png'),
  //   imgAct: requireImg('common/menu06_active.png'),
  //   routerName: 'Industry'
  // }
])
const router = useRouter()
const route = useRoute()
const changeRouter = (item) => {
  router.push({ name: item.routerName })
}
const currentRoute = computed(() => {
  return route.name
})
</script>
<template>
  <div class="menu">
    <!-- <div
      class="nav"
      :class="{ active: currentRoute == item.routerName }"
      v-for="(item, index) in navList"
      :key="index"
      @click="changeRouter(item)"
    >
      <p>
        <img :src="item.imgAct" v-if="currentRoute == item.routerName" />
        <img :src="item.img" v-else />
      </p>
      <p>
        <span>{{ item.name }}</span>
      </p>
    </div> -->
    <img src="@/assets/tietu/leftpanel.png"/>
  </div>
</template>
<style scoped lang="scss">
.menu {
  position: absolute;
  top: 110px;
  left: 0;
  width: 361.5px;
  height:963px;
  // height: 600px;
  display: flex;
  z-index: 2;
  // padding: 35px 40px 35px 10px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  // background: url('@img/common/menu_bg.png');
  // background-size: 100% 100%;
  img{
    width: 361.5px;
    height:963px;
  }

  .nav {
    width: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &.active {
      p:first-child {
        width: 80px;
        height: 70px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      p:last-child {
        opacity: 1;
        &::after {
          position: absolute;
          width: 120px;
          height: 53px;
          content: '';
          background: url('@img/common/menu_bar_bg.png');
          background-size: 100% 100%;
          left: -26px;
          bottom: -17px;
          z-index: 0;
        }
      }
    }

    p:first-child {
      width: 65px;
      height: 65px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p:last-child {
      position: relative;
      height: 18px;
      line-height: 18px;
      text-align: center;
      margin-top: -8px;
      opacity: 0.7;
      font-size: 15px;

      span {
        position: relative;
        z-index: 1;
      }
    }
  }
}
</style>
